<template>
  <div class="container">
    <VerticalLayout>
      <!-- 插入搜索组件 -->
      <template #search>
        <DynamicQueryForm
          :show-match-range="true"
          :extra-fields="extraField"
          :columns-values="columnsValues"
          @submit="handleQuery"
        />
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="listComment"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left> </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>
          <!-- 商品信息 -->
          <template #skuInfoSlot="{ row }">
            <el-space direction="vertical" alignment="normal">
              <div>{{ row.skuInfo.spec }}</div>
              <div>订单ID: {{ row.orderId }}</div>
              <div>用户昵称: {{ row.nickName || '--' }}</div>
            </el-space>
          </template>

          <template #scoreSlot="scope">
            <el-rate v-model="scope.row.score" :max="5" :show-text="false" :disabled="true" />
          </template>
          <!-- 评价内容 -->
          <template #contentSlot="scope">
            <div>{{ scope.row.content }}</div>
            <!-- picture 评论图集合  -->
            <!-- 判断是否是数组,以及是否是可以通过parse解析的数组 -->
            <!-- 评论图集合 -->
            <div v-if="getSafePictures(scope.row).length > 0">
              <el-image
                v-for="(item, index) in getSafePictures(scope.row)"
                :key="index"
                :src="item"
                fit="contain"
                style="width: 80px; height: 80px; margin-right: 8px"
              />
            </div>
          </template>

          <!-- 是否精选 -->
          <template #selectedSlot="scope">
            <el-tag v-if="scope.row.selected === 1" type="success">是</el-tag>
            <el-tag v-else type="danger">否</el-tag>
          </template>

          <template #appealStatusSlot="scope">
            <el-tag v-if="scope.row.appealStatus === 1" type="success">已申诉</el-tag>
            <el-tag v-else type="danger">未申诉</el-tag>
          </template>

          <template #tagsSlot="scope">
            <el-space wrap>
              <el-tag v-for="tag in scope.row.tags" :key="tag" :closeable="tag.closeable">
                {{ tag }}
              </el-tag>
            </el-space>
          </template>

          <template #operationSlot="{ row }">
            <el-button
              v-if="row.appealStatus === 0"
              type="success"
              size="small"
              @click="markAppeal(row, '1')"
              link
              >标记已申诉</el-button
            >
            <el-button v-else link type="danger" size="small" @click="markAppeal(row, '0')"
              >标记未申诉</el-button
            >
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>
  </div>
</template>

<script setup lang="ts">
import { columns } from './columns';
import { listComment, updateComment } from '../../../api/evaluate';
import { extraField, columnsValues } from './searchOptions';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';

// table
const customTableRef = ref();
// 选中项
const selections = ref<any>([]);

const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};

// 标记申诉 需要弹窗确认
const markAppeal = (row: any, appealStatus: string) => {
  // 弹窗确认
  ElMessageBox.confirm(
    `是否确认标记状态为:${appealStatus === '1' ? '已申诉' : '未申诉'} ？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 确认后执行更新操作
    updateComment({
      commentId: row.commentId,
      appealStatus
    }).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success('操作成功');
        // 刷新表格数据
        customTableRef.value?.refresh();
      } else {
        ElMessage.error(res.msg || '操作失败');
      }
    });
  });
};

const getSafePictures = (row: any) => {
  const pics = row?.picture;

  if (!pics) return [];

  // 字符串：尝试 JSON.parse
  if (typeof pics === 'string') {
    try {
      const parsed = JSON.parse(pics);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  }

  // 数组 → 直接返回
  return Array.isArray(pics) ? pics : [];
};

//
const handleQuery = (form: any) => {
  customTableRef.value?.search(form);
};
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
